import React, { Component } from 'react'
import SuperTable from '../zidingyiFile/SuperTable.js'
import { baseUrl  } from'../helper/baseUrl.js'
import LeibieForm from '../component/LeibieForm.js'
import axios from 'axios'

const columns = [
  {
    title: '名称',
    dataIndex: 'foodtype'
  }, {
    title: '介绍',
    dataIndex: 'description'
  }, {
    title: '创建时间',
    dataIndex: 'createtime'
  }
] 

export default class Leibie extends Component {
  state = {
    leibieList: [],
    showForm :false,
    isUpdate:false,
    checkedLeibie:[],
    // currPage: 1,
    // pageSize: 5,
    // total: 80
  }

  componentDidMount() {
    this.getData()
  }

  getData = () => {
    // const { currPage, pageSize} =this.state
    axios({
      method: 'get',
      // url: baseUrl + `dc_caipinfenlei?transform=1&order=id,desc& page=${currPage},${pageSize}`,
      url: baseUrl + 'dc_caipinfenlei?transform=1&order=id,desc& page=1,5'
    }).then((res) => {
      this.setState({leibieList: res.data.dc_caipinfenlei})
    }).catch()
  }

  showForm=()=>{
    this.setState({showForm: true, isUpdate: false})
  }

  closeForm=()=>{
    this.setState({showForm: false})
  }

  saveHandle=(fd)=>{
    // console.log(fd)
    let method = 'post', url = baseUrl +'dc_caipinfenlei'
    if(this.state.isUpdate){
      method = 'put',
      url += '/'+ fd.id
    }


    axios({
      method: method,
      url: url,
      data: fd,
    }).then(res=>{
        this.getData()
        this.closeForm()
    })
  }

  updateInfo=()=>{
    if(this.state.checkedLeibie.length===0){
      alert('请至少选择一个进行修改！')
    }else{
      this.setState({ showForm: true, isUpdate: true })
    }
    
  }

  deleteInfo=()=>{
    let leibieArrIds = []
    this.state.checkedLeibie.map((val,index)=>(

      leibieArrIds.push(val.id)
    ))

    leibieArrIds = leibieArrIds.splice(',')
    // console.log(leibieArrIds)

    if (this.state.checkedLeibie.length === 0) {
      alert('至少选择一个删除！')
      return
    } else {
      if (!window.confirm('确定要删除该类别吗？')) {
        return
      }
    }
    axios({
      method: 'delete',
      url: baseUrl + 'dc_caipinfenlei/' + leibieArrIds,
    }).then(res=>{
      if (res) {
        this.getData()
      } else {
        alert('删除失败！')
      }
    })

  }

  render() {

    const { pageSize, currPage, total } = this.state

    const rowSelection = {
      onSelect: (seleted, selectedRows) => {
        // console.log(seleted, selectedRows)
        this.setState({ checkedLeibie: selectedRows })
      }
    }


    // const paging = {
    //   onChange: (page, size) => {
    //     // console.log(page,size)
    //     this.setState({ currPage: page, pageSize: size }, () => {
    //       this.getData()
    //     })
    //   },
    //   pageSize: pageSize,
    //   current: currPage,
    //   total: total
    // }

    return (
        <div>
          <section className="content-header">
            <h1>类别管理</h1>
            <ol className="breadcrumb">
              <li><a href="#"><i className="fa fa-dashboard"></i>首页</a></li>
              <li className="active">类别管理</li>
            </ol>
            <div className="row">
              <div className="btn-group col-md-9" style={{ marginTop: 20 }}>
                <button  type="button" className="btn btn-primary" onClick={this.showForm}>新增类别</button>
                <button  type="button" className="btn btn-warning" onClick={this.updateInfo}>修改</button>
                <button  type="button" className="btn btn-danger"onClick={this.deleteInfo}>删除</button>
              </div>
              {/* <div className="input-group input-group-sm col-md-3">
                <input type="text" className="form-control" />
                <span className="input-group-btn">
                  <button type="button" className="btn btn-info btn-flat">搜索</button>
                </span>
              </div> */}
            </div>
          </section>
        <SuperTable 
        columns={columns}
        showIndex={true}
        rowSelection={rowSelection}
        dataSource={this.state.leibieList}
        // pagination={paging}
        />
        {
          this.state.showForm ? <LeibieForm 
          closeForm={this.closeForm}
          isUpdate={this.state.isUpdate}
          saveHandle={this.saveHandle}
          updateInfo={this.updateInfo}
          deleteInfo={this.deleteInfo}
          leibie={this.state.checkedLeibie[0]} 
          /> :'' 
        }
      
        </div>

    )
  }
}
